<template>
    <footer class="pub-foot flex">
        <div class="foot-box flex1 flex jus-b">
            <router-link :to="'/'" class="foot-btn flexv flexc">
                <div class="foot-img flex">
                    <img v-if="index == 'false'" src="~@/assets/foot-ico1.png" alt="">
                    <img v-else src="~@/assets/foot-ico1-on.png" alt="">
                </div>
                <p class="foot-btn-name" :class="{'on': index == 'true'}">首页</p>
            </router-link>
            <router-link :to="'/search'" class="foot-btn flexv flexc">
                <div class="foot-img flex">
                    <img v-if="search == 'false'" src="~@/assets/foot-ico2.png" alt="">
                    <img v-else src="~@/assets/foot-ico2-on.png" alt="">
                </div>
                <p class="foot-btn-name" :class="{'on': search == 'true'}">查询</p>
            </router-link>
            <router-link :to="'/center'" class="foot-btn flexv flexc">
                <div class="foot-img flex">
                    <img v-if="center == 'false'" src="~@/assets/foot-ico3.png" alt="">
                    <img v-else src="~@/assets/foot-ico3-on.png" alt="">
                </div>
                <p class="foot-btn-name" :class="{'on': center == 'true'}">我的</p>
            </router-link>
        </div>
    </footer>
</template>
<script>
import { mapState } from 'vuex';
export default {

    data () {
        return {
        }
    },
    created(){
    },
    
    props: {
        index: {
            type: String,
            default: 'false'
        },
        search: {
            type: String,
            default: 'false'
        },
        center: {
            type: String,
            default: 'false'
        }
    },

    computed: {
        ...mapState(['user'])
    },
    methods: {
    }
}
</script>

<style lang="less" scoped>
 @import url('../style/mixin');
 .pub-foot {
     width: 100%;
     max-width: 750px;
     height: 0.98rem;
     margin: 0 auto;
     padding: 0 0.3rem;
     position: fixed;
     z-index: 98;
     bottom: 0;
     left: 0;
     right: 0;
     border-top: 1px solid #dbdbdb;
     background-color: #fff;
     .foot-btn {
         width: 0.98rem;
         height: 0.98rem;
         .foot-img {
             max-width: 0.42rem;
             max-height: 0.38rem;
             img {
                 width: 100%;
                 height: 100%;
             }
         }
         .foot-btn-name {
             margin-top: 0.08rem;
             font-size: 0.22rem;
             line-height: 120%;
             font-weight: bold;
             color: #999;
         }
         .on {
             color: #1f78ff;
         }
     }
 }
</style>

